<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arrow demo</title>
</head>
<body>
<script>
    window.onload = function () {
        var canvas = document.createElement('canvas');
        context = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        document.body.appendChild(canvas);
        var mouse = utils.captureMouse(canvas);
        var arrow = new Arrow();
        arrow.x = centerX;
        arrow.y = centerY;
        var arrow2 = new Arrow();
        arrow2.x = centerX + 50;
        arrow2.y = centerY + 50;
        var ball = new Ball();
        ball.x = centerX + 100;
        ball.y = centerY + 100;
        (function drawFrame() {
            window.requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, canvas.width, canvas.height);
            var dx = mouse.x - arrow.x,
                    dy = mouse.y - arrow.y;
            arrow.rotation = Math.atan2(dy, dx);
            var dx2 = mouse.x - arrow2.x,
                    dy2 = mouse.y - arrow2.y;
            arrow2.rotation = Math.atan2(dy2, dx2);
            arrow.draw(context);
            arrow2.draw(context);
            ball.draw(context);
        })();
    }
</script>
</body>
<script src="arrow.js"></script>
<script src="util.js"></script>
<script src="ball.js"></script>
</html>